<template>
  <div>
    
    <el-table :data="staffs" @expand-change="getCensus">
    <el-table-column type="expand">
      <template slot-scope="props">
        <el-form label-position="left" inline class="demo-table-expand">
          <el-form-item label="本月注册商家">
            <span>{{ props.row.allMoney }}</span>
          </el-form-item>
          <el-form-item label="本月激活商家">
            <span>{{ props.row.orderCount }}</span>
          </el-form-item>
          <el-form-item label="本月订单总数">
            <span>{{ props.row.allCars }}</span>
          </el-form-item>
        </el-form>
      </template>
    </el-table-column>
      <el-table-column prop="name" label="商务人员名称"></el-table-column>
      <el-table-column prop="phone" label="商务人员电话"></el-table-column>
      <el-table-column prop="createDate" label="创建时间"></el-table-column>
    </el-table>

    <el-pagination background layout="prev, pager, next" :total="total" @current-change="handleCurrentChange"></el-pagination>
  </div>
</template>
<script>
import axios from 'axios'
export default {
  inject: ["reload"],
  data: function() {
    return {
      staffs: [],
      total:0
    };
  },
  async created() {
    this.handleCurrentChange(1);    
  },
  methods: {
    handleCurrentChange:async function(val){
      const {data} = await this.$http.get(`/staff/getStaff`);
  
      if (data.code==1) {
        this.staffs=data.object;
        this.staffs.forEach(staff=>{
          staff.createDate=staff.createDate.replaceAll('T',' ').replaceAll('.000+0000',' ');
         
        })
        this.total=data.object.length;
      }else{
        this.$message({
            message:data.message,
            type: 'error'
          });
      }
    },
    getCensus:async function(row){
      if(!row.allMoney){
        const {data} = await this.$http.get(`/order/censusOrder?merchantId=${row.id}`);
        if (data.code==1) {
          for(let i in this.merchants){
            if(this.merchants[i].id==row.id){
              for (const key in data.object) {
                this.merchants[i][key] = data.object[key];
              }
            }
          }
        }else{
          this.$message({
              message:data.message,
              type: 'error'
            });
        }
      }
    },
  }
};
</script>
<style>
  .el-form-item.show-pic .el-image{
    margin:0 10px;
  }
  .demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 100%;
  }
</style>